<template>
    <div class="wrapper">
        <div>
            <div class="T0">
                <p class="titled">
                    <span>费率信息</span>
                </p>
                <div class="item">
                    <van-field
                        v-model="hlb.creditT0.rate"
                        label="T0贷记卡"
                        :placeholder="hlbLowerUpper.creditT0.lowerFee + '-' + hlbLowerUpper.creditT0.upperRate"
                    >
                        <template #button>
                            <div>%</div>
                        </template>
                    </van-field>
                    <van-field
                        v-model="hlb.creditT0.capEstreatRate"
                        is-link
                        readonly
                        v-if="hlb.creditT0.capEstreatRate != null"
                        label="增收手续费"
                        placeholder="请选择增收手续费"
                        @click="showZSSXFPicker = true"
                    >
                        <template #button>
                            <div>元/笔</div>
                        </template>
                    </van-field>
                    <van-field
                        v-model="hlb.debitCardT1.rate"
                        label="T1借记卡"
                        :placeholder="hlbLowerUpper.debitCardT1.lowerFee + '-' + hlbLowerUpper.debitCardT1.upperRate"
                    >
                        <template #button>
                            <div>%</div>
                        </template>
                    </van-field>
                    <van-field
                        v-model="hlb.debitCardT1.capsAmout"
                        label="T1借记卡封顶"
                        :placeholder="hlbLowerUpper.debitCardT1.lowerCaps + '-' + hlbLowerUpper.debitCardT1.upperCaps"
                    ></van-field>

                    <van-field
                        v-if="hlb.discount.feeType === 'DISCOUNT'"
                        label="享惠"
                        v-model="hlb.discount.rate"
                        :placeholder="'区间' + hlbLowerUpper.discount.lowerFee + '%-' + hlbLowerUpper.discount.upperRate + '%'"
                    >
                        <template #button>%</template>
                    </van-field>
                    <van-field v-model="hlb.ysf.rate" label="扫码" :placeholder="hlbLowerUpper.ysf.lowerFee + '-' + hlbLowerUpper.ysf.upperRate">
                        <template #button>
                            <div>%</div>
                        </template>
                    </van-field>
                    <van-field
                        v-if="agencySource == 'HLB'"
                        v-model="hlb.maxzfb.rate"
                        label="大额支付宝"
                        :placeholder="hlbLowerUpper.maxzfb.lowerFee + '-' + hlbLowerUpper.maxzfb.upperRate"
                    >
                        <template #button>
                            <div>%</div>
                        </template>
                    </van-field>
                </div>
            </div>
            <div class="btn" @click="submitRate">确认</div>
            <van-popup v-model:show="showZSSXFPicker" round position="bottom">
                <van-picker title="增收手续费" :columns="ZSSXFList" @cancel="showZSSXFPicker = false" @confirm="clickZSSXFConfirm" />
            </van-popup>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { changeFee, feeInterval, queryFee } from '@/api/merchants'
import store from '@/store'
import { showSuccessToast } from 'vant'

export default defineComponent({
    name: 'rateEdit',
    setup() {
        const route = useRoute()
        const router = useRouter()
        console.log(route.query.CUSTOMER_NO)
        const state = reactive({
            customerNo: '',
            a: '',
            agencySource:route.query.agencySource,
            userInfo: {},
            checked: false,
            ZSSXFList: [
                { text: '0元/笔', value: '0' },
                { text: '3元/笔', value: '3' }
            ],
            showZSSXFPicker: false,
            creditT0: {}, // t0贷记卡 费率
            lowerT0upper: {}, // t0贷记卡 设置区间
            hlb: {
                creditT0: {},
                debitCardT1: {},
                ysf: {},
                discount: {},
                maxzfb: {}
            },
            hlbLowerUpper: {
                creditT0: {},
                debitCardT1: {},
                ysf: {},
                discount: {},
                maxzfb: {}
            },
            hlblowerT0upper: [{}, {}, {}, {}, {}]
        })
        //费率变更确认
        const submitRate = () => {
            let data = {
                customerNo: route.query.CUSTOMER_NO,
                t1DebitCardRate: state.hlb.debitCardT1.rate, // t1借记卡
                t0CreditCardRate: state.hlb.creditT0.rate, // t0贷记卡
                ysfRate: state.hlb.ysf.rate, // 扫码
                t0EstreatRate: state.hlb.creditT0.capEstreatRate,
                capAmount: state.hlb.debitCardT1.capsAmout, //t1封顶
                agencySource: route.query.agencySource,
                t0CreditCardRateDiscount: state.hlb.discount.rate // 享惠费率
            }
            if (state.agencySource == 'HLB' && state.hlb.maxzfb && state.hlb.maxzfb.rate) {
                data.zfbMaxRate = state.hlb.maxzfb.rate
            }
            changeFee(data).then(res => {
                showSuccessToast('变更成功')
                setTimeout(() => {
                    router.go(-1)
                }, 1500)
            })
        }
        const switchChange = e => {
            if (e) {
                state.creditT0.gl2Rate = 0.03
            } else {
                state.creditT0.gl2Rate = 0
            }
        }
        // 获取已配置费率
        const getQueryFee = () => {
            queryFee({
                customerNo: route.query.CUSTOMER_NO,
                agencySource: route.query.agencySource
            }).then(res => {
                state.userInfo = store.state.user.userInfo
                res.object.forEach(item => {
                    if (item.settleCycle === 'T0') {
                        // T0贷记卡
                        if (item.cardType === 'CREDIT_CARD' && item.feeType === 'STANDARD') {
                            state.hlb.creditT0 = item
                        }
                    }
                    if (item.settleCycle === 'T1') {
                        // T0贷记卡
                        if (item.cardType === 'DEBIT_CARD' && item.feeType === 'STANDARD') {
                            state.hlb.debitCardT1 = item
                        }
                    }
                    if (item.brandCode === 'YLSM') {
                        // T0贷记卡
                        state.hlb.ysf = item
                    }
                    if (item.brandCode === 'MAX_ZFB') {
                        // 大额支付宝
                        state.hlb.maxzfb = item
                    
                    }
                    if (item.feeType === 'DISCOUNT') {
                        // T0贷记卡
                        state.hlb.discount = item
                    }
                })
            })
        }
        getQueryFee()
        // 获取费率区间
        const getFeeInterval = () => {
            feeInterval({
                customerNo: route.query.CUSTOMER_NO,
                agencySource: route.query.agencySource
            }).then(res => {
                res.object.forEach(item => {
                    if (item.settleCycle === 'T0') {
                        // T0贷记卡
                        if (item.cardType === 'CREDIT_CARD' && item.feeType === 'STANDARD') {
                            state.hlbLowerUpper.creditT0 = item
                        }
                    }
                    if (item.settleCycle === 'T1') {
                        // T0贷记卡
                        if (item.cardType === 'DEBIT_CARD' && item.feeType === 'STANDARD') {
                            state.hlbLowerUpper.debitCardT1 = item
                        }
                    }
                    if (item.brandCode === 'YSF') {
                        // T0贷记卡
                        state.hlbLowerUpper.ysf = item
                    }
                    if (item.brandCode === 'MAX_ZFB') {
                        // 大额支付宝
                        state.hlbLowerUpper.maxzfb = item
                    }
                    if (item.feeType === 'DISCOUNT') {
                        // T0贷记卡
                        state.hlbLowerUpper.discount = item
                    }
                })
            })
        }
        getFeeInterval()
        // 增收手续费弹窗确认
        const clickZSSXFConfirm = ({ selectedOptions }) => {
            state.hlb.creditT0.capEstreatRate = selectedOptions[0].value
            state.showZSSXFPicker = false
        }
        return {
            ...toRefs(state),
            submitRate,
            switchChange,
            clickZSSXFConfirm
        }
    }
})
</script>

<style scoped lang="scss">
.titled {
    font-size: 16px;
    color: #000000;
    text-align: center;
    opacity: 1;
    padding: 20px;
}

.btn {
    width: 160px;
    height: 40px;
    background: #66d6ff;
    opacity: 1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px auto;
}
</style>
